<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>jQuery</title>
</head>
<body>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    var elements = $('a');
    elements.attr('target', '_blank');
    var length = elements.length;
</script>
<div>
    <div>Div 1</div>
    <div>Div 2</div>
    <span>Span 1</span>
</div>
<span>Span 2</span>
<script>
    var innerSpan = $('div > span');
    $('a, #myDiv, .myCssClass, p > span');
</script>
<script>
    $('a, #myDiv, .myCssClass, p > span').attr('sytle', 'color: red;');

    $('#myDiv').css('color', 'red');

    var allParagraphs = $('p');
    allParagraphs.css('background-color', 'yellow');    // correct!
    allParagraphs.css('backgroundColor', 'blue');       // correct, too!

    // don't do this
    allParagraphs.css('color', 'blue');
    allParagraphs.css('background-color', 'yellow');

    allParagraphs.css({
        color: 'blue',
        backgroundColor: 'yellow'
    });
</script>
<div id="content" class="class-one class-two">My div with two CSS classes!</div>
<script>
    var content = $('#content');
    content.addClass('class-three');
    content.addClass('class-four');

    content.addClass('class-three').addClass('class-four');
    content.addClass('class-three class-four');

    content.removeClass('class-one');
    content.removeClass('class-one class-two');
    content.removeClass();

    content.toggleClass('class-one');
</script>
<script>
    var e = new MouseEvent();
    var target = e.target;
    if (e.type == 'mouseover') {
        target.className = 'class-one';
    } else if (e.type == 'mouseout') {
        target.className = '';
    }
</script>
<script>
    var e = new MouseEvent();
    var target = $(e.target);
    if (e.type == 'mouseover' || e.type == 'mouseout') {
        target.toggleClass('class-one');
    }

    var hasClassOne = content.hasClass('class-one');
</script>
<script>
    var a = document.createElement('a');
    a.id = 'my-link';
    a.setAttribute('href', 'http://jquery.com');
    a.setAttribute('title', 'jQuery\'s Website');
    var text = document.createTextNode('Click to go to jQuery\'s website');
    a.appendChild(text);
    document.body.appendChild(a);
</script>
<script>
    var a = $('<a/>').attr({
        id: 'my-link',
        href: 'http://jquery.com',
        title: 'jQuery\'s Website'
    }).text('Click here to go to jQuery\'s website');
    $(document.body).append(a);

    a = $('<a href="http://jquery.com" title="jQuery\'s Website">Click here to go to jQuery\'s website</a>');
</script>
<script>
    function elementClick(e) {
        alert('You clicked me!');
    }
    $('.class-one').on('click', elementClick);
</script>
<script>
    function eventHandler(e) {
        if (e.type == 'click') {
            alert('You clicked me!');
        } else {
            alert('You double-clicked me!');
        }
    }
    $('.class-one').on('click dbclick', eventHandler);

    function clickHandler(e) {
        alert('You clicked me!');
    }

    function dbclickHandler(e) {
        alert('You double-clicked me!');
    }

    $('.class-three').on({
        click: clickHandler,
        dbclick: dbclickHandler
    });
</script>
<script>
    $('.class-one').off('click', elementClick);
    $('.class-two').off('click dbclick', eventHandler);
    $('.class-three').off({
        click: clickHandler,
        dbclick: dbclickHandler
    });
    $('.class-four').off();
</script>
<script>
    $.get('text-file.text');

    $.get('text-file.text', function (data) {
        alert(data);
    });
</script>
<script>
    var parms = {
        username: 'jmcpeak'
    };

    function handleResponse(e) {
        var obj = JSON.stringify(e);
        // do something with obj
    }

    $.get('php-form-validator.php', parms, handleResponse);
</script>
<script>
    var parms = {
        username: 'jmcpeak'
    };

    function handleRespanse(e) {
        // var obj is already an object
    }

    $.getJSON('php-form-validator.php', parms, handleRespanse);
</script>
<script>
    var parms = {
        username: 'jmcpeak'
    };

    function handleRespanse(e) {
        // var obj is already an object
    }

    function displaySuccessMessage() {

    }

    function displayErrorMessage() {

    }

    var xhr = $.getJSON('php-form-validator.php', parms);
    xhr.done(handleRespanse);

    $.getJSON('php-form-validator.php', parms).dnoe(handleRespanse);

    $.getJSON('php-form-validator.php', parms)
            .dnoe(handleRespanse)
            .done(displaySuccessMessage)
            .fail(displayErrorMessage);
</script>
</body>
</html>